<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        footer {
            height: 50px;
            background-color: #6495ED;
            line-height: 50px;
            color: white;
        }

        .left {
            float: left;
            width: 210px;
            height: 800px;
            color: white;
            background-color: #35355e;
        }

        li {
            height: 60px;
            line-height: 60px;
        }

        .top {
            float: left;
            height: 40px;
            width: 85%;
            line-height: 40px;
            border-bottom: 1px solid black;
        }

        .hy {
            width: 80px;
            height: 40px;
            background-color: #35355e;
            text-align: center;
            color: white;
        }

        .tady {
            height: 70px;
            width: 84.1%;
            float: left;
            display: flex;
            justify-content: space-around;
            margin-left: 10px;

        }

        .one {
            width: 290px;
            height: 100%;
            background-color: aqua;
            /* padding-left:10px ; */
        }

        .banner {
            width: 84.1%;
            height: 400px;
            float: left;
            display: flex;
            justify-content: space-between;
            margin-top: 10px;

            padding-left: 15px;
            margin-bottom: 20px;

        }

        .twe {
            width: 48.6%;
            height: 380px;

        }

        .three {
            width: 49.6%;
            height: 380px;


        }

        .bottom {
            width: 84.1%;
            height: 200px;
            float: left;
            /* border-top: 1px solid black; */
            padding-left: 20px;
        }

        table {
            width: 100%;
            border-collapse: collapse;

        }

        thead {
            border-bottom: 1px solid black;
        }

        td {
            height: 30px;
            margin-bottom: 10px;
            text-align: center;
        }

        th {
            height: 40px;
        }
    </style>
</head>

<body>
    <footer>
        <span style=" margin-left: 40px; color: white; font-weight: bold;">后台管理系统</span>
        <div class="right" style="float: right;">
            <span style="font-size: 12px;">当前用户:bootstrap中文</span>
            <span style="font-size: 12px;">角色:管理员</span>
        </div>
    </footer>
    <div class="left">
        <ul>
            <li><span style="font-size: 18px;margin-right: 8px;margin-left: 10px;">☺</span> 后台首页 <span
                    style="margin-left: 70px;">&gt;</span> </li>
            <li><span style="font-size: 18px;margin-right: 8px;margin-left: 10px;">☺</span> 设计元素 <span
                    style="margin-left: 70px;">&gt;</span> </li>
            <li><span style="font-size: 18px;margin-right: 8px;margin-left: 10px;">☺</span> 表单元素 <span
                    style="margin-left: 70px;">&gt;</span> </li>
            <li><span style="font-size: 18px;margin-right: 8px;margin-left: 10px;">☺</span> 示例页面 <span
                    style="margin-left: 70px;">&gt;</span> </li>
            <li><span style="font-size: 18px;margin-right: 8px;margin-left: 10px;">☺</span> 常用案例 <span
                    style="margin-left: 70px;">&gt;</span> </li>
            <li><span style="font-size: 18px;margin-right: 8px;margin-left: 10px;">☺</span> 脚本插件 <span
                    style="margin-left: 70px;">&gt;</span> </li>
            <li><span style="font-size: 18px;margin-right: 8px;margin-left: 10px;">☺</span> 统计图表 <span
                    style="margin-left: 70px;">&gt;</span> </li>

        </ul>
    </div>
    <div class="top">
        <span style="float: left;margin-right: 15px; margin-left: 15px;">◀</span>
        <div style="float: left;" class="hy"> 欢迎界面</div>
        <span style="float: right;">页面操作▽</span>
        <span style="float: right;margin-right: 15px; margin-left: 15px;">▶</span>
    </div>
    <div class="tady">
        <div class="one" style="background-color: 	#1E90FF;">
            <p style="font-size: 13px; margin-bottom: 5px;">今日收入</p>
            <span style="font-size: 20px;">100,000.00</span>
            <span style="font-size: 25px; margin-left: 150px;">♥</span>

        </div>
        <div class="one" style="background-color: 	#4169E1;">
            <p style="font-size: 13px; margin-bottom: 5px;">昨日收入</p>
            <span style="font-size: 20px;">200,000.00</span>
            <span style="font-size: 25px; margin-left: 150px;">♥</span>

        </div>
        <div class="one" style="background-color: green;">
            <p style="font-size: 13px; margin-bottom: 5px;">月度累计收入</p>
            <span style="font-size: 20px;">1000,000.00</span>
            <span style="font-size: 25px; margin-left: 140px;">♥</span>

        </div>
        <div class="one" style="background-color:	#808000 ;">
            <p style="font-size: 13px; margin-bottom: 5px;">年度累计收入</p>
            <span style="font-size: 20px;">5,000,000.00</span>
            <span style="font-size: 25px; margin-left: 120px;">♥</span>

        </div>

    </div>
    <div class="banner">
        <div class="twe"></div>
        <div class="three"></div>
    </div>
    <div class="bottom">
        <table>
            <thead>
                <tr>
                    <td style="width: 150px; text-align: left;">#</td>
                    <td style="width: 250px;">订单号</td>
                    <td>商品名称</td>
                    <td>下单日期</td>
                    <td style="width: 200px;">状态</td>
                    <td>处理情况</td>
                </tr>
            </thead>
            <tbody>

            </tbody>
        </table>

    </div>


</body>

</html>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.0/echarts.js"></script>
<script src="./练习ajax.js"></script>


<script>
    let tew = document.querySelector('.twe')
    let three = document.querySelector('.three')
    var res = echarts.init(three)
    var set = echarts.init(tew)
    res.setOption({
        title: { //图表的标题
            text: '每年收入走势'

            // left:'center',
        },
        legend: { //图例
            top: 25,
            // bottom: 25,
            // right: 10,
        },
        xAxis: { //x轴设置
            data: ['2009', '2010', '2011', '2012', '2013', '2014', '2015', '2015', '2016', '2017', '2018', '2019', '2020']
        },
        yAxis: { //y轴设置
            // data:[20,30,40,50,60,70,80],
            splitLine: {
                show: true
            }
        },
        series: [ //数据系列

            {
                name: '每年收入走势',
                type: 'line',//'line' , 'bar' , 'pie'
                data: [50, 55, 60, 40, 45, 40, 40, 65, 40, 68, 20, 72, 60],
                // symbolSize:15, //圆点大小
                symbol: 'circle',//圆点形状
                smooth: true, //是否平滑曲线显示
                itemStyle: {
                    normal: {
                        color: 'green', //折线颜色
                        // borderWidth:2, //圆点的边框宽度
                        borderColor: 'grern', //圆点的边框颜色
                        lineStyle: { width: 2 }, //折现的宽度
                        shadowBlur: 5,
                        shadowColor: '#188df0'

                    }
                }

            },
            {
                name: '每年同期收入走势',
                type: 'line',//'line' , 'bar' , 'pie'
                data: [48, 50, 52, 48, 40, 35, 40, 65, 45, 58, 30, 72, 58],
                // symbolSize:15, //圆点大小
                symbol: 'circle',//圆点形状
                smooth: true, //是否平滑曲线显示
                itemStyle: {
                    normal: {
                        color: 'grey', //折线颜色
                        // borderWidth:2, //圆点的边框宽度
                        borderColor: 'grey', //圆点的边框颜色
                        lineStyle: { width: 2 }, //折现的宽度
                        shadowBlur: 5,
                        shadowColor: '#188df0'

                    }
                }

            }

        ]
    });

    set.setOption({
        title: { //图表的标题
            text: '每月收入'

            // left:'center',
        },
        legend: { //图例
            top: 25,
            // bottom: 25,
            // right: 10,
        },
        xAxis: { //x轴设置
            data: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12']
        },
        yAxis: { //y轴设置
            // data:['$0','$1k','$2k','$3k'    ],
            splitLine: {
                show: false
            }
        },
        series: [ //数据系列

            {
                name: 'This year',
                type: 'bar',//'line' , 'bar' , 'pie'
                data: ['2550', '1550', '1650', '3300', '4800', '3500', '1600', '2500', '2200', '1750', '3900', '1800'],
                // symbolSize:15, //圆点大小
                symbol: 'circle',//圆点形状
                smooth: true, //是否平滑曲线显示
                itemStyle: {
                    normal: {
                        color: 'blue', //折线颜色
                        // borderWidth:2, //圆点的边框宽度
                        borderColor: 'blue', //圆点的边框颜色
                        lineStyle: { width: 2 }, //折现的宽度
                        shadowBlur: 5,
                        shadowColor: '#188df0'

                    }
                }

            },
            {
                name: 'Last year',
                type: 'bar',//'line' , 'bar' , 'pie'
                data: ['2050', '1600', '1850', '3000', '4000', '3700', '1800', '2000', '2800', '2100', '3700', '3600'],
                // symbolSize:15, //圆点大小
                symbol: 'circle',//圆点形状
                smooth: true, //是否平滑曲线显示
                itemStyle: {
                    normal: {
                        color: 'grey', //折线颜色
                        // borderWidth:2, //圆点的边框宽度
                        borderColor: 'grey', //圆点的边框颜色
                        lineStyle: { width: 2 }, //折现的宽度
                        shadowBlur: 5,
                        shadowColor: '#188df0'

                    }
                }

            }

        ]
    });




    function render() {
        ajax('get', './库.json', {}).then((list) => {
            var str = list.map((item, index) => {
                return `<tr>
                    <th style="text-align: left;" >${item.id}</th>
                    <th>${item.num}</th>
                    <th>${item.name}</th>
                    <th>${item.date}</th>
                    <th>${item.zt}</th>
                    <th>${item.cl}</th>
                    
                </tr>`
            }).join('')
            document.querySelector('tbody').innerHTML = str;
            console.log(list);
        })
    }
    render()

    document.cookie = "name=H5-2217; expires=" + new Date( new Date().getTime() + 24*60*60*1000);
    document.cookie = "age=3";
    document.cookie = "sex=true";
    document.cookie = "hobby=" + JSON.stringify([{ a: [], b: {}, c: "sdfs" }, {}, {}]);
    console.log(document.cookie);
    function getCookie(key) {
        var g = document.cookie
        var arr = g.split(';')
        var obj = {}
        arr.forEach((item) => {
            var arr1 = item.split('=');
            obj[arr1[0]] = arr1[1]

        })
        return obk[key]
    };
    console.log(getCookie('name'));
    console.log(getCookie('age'));
    console.log(getCookie('sex'));
    console.log(getCookie('hobby'));





</script>